<!--
 * @Author: wrh123 482597539@qq.com
 * @Date: 2024-01-11 12:12:11
 * @LastEditors: wrh123 482597539@qq.com
 * @LastEditTime: 2024-01-12 10:44:42
 * @FilePath: /vue-admin/src/views/Registration/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="registration">
    <!-- Registration -->
    <el-card shadow="never">
      <el-form label-width="80px" :inline="true">
        <el-form-item label="姓名">
          <el-input size="mini" v-model="queryParms.username" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="注册ip">
          <el-input size="mini" v-model="queryParms.ipAddress" placeholder="请输入注册ip地址" />
        </el-form-item>
        <br />
        <el-form-item label="邮箱">
          <el-input size="mini" v-model="queryParms.emails" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="登录ip">
          <el-input size="mini" v-model="queryParms.loginIp" placeholder="请输入登录ip地址" />
        </el-form-item>
        <el-form-item label="用户标签">
          <el-input size="mini" v-model="queryParms.userTagName" placeholder="请输入用户标签" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="chaBTn">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never" style="margin-top: 20px;">
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column prop="username" align="center" label="姓名" width="150px" />
        <el-table-column prop="phone" align="center" label="手机号" width="120px" />
        <el-table-column prop="idNumber" align="center" label="IDCard" width="180px" />
        <el-table-column prop="emails" align="center" label="邮箱" width="180px" />
        <el-table-column prop="nickname" align="center" label="昵称" width="180px" />
        <el-table-column prop="userTagName" align="center" label="用户标签" />
        <el-table-column prop="createTime" align="center" label="注册时间" width="150px">
          <template #header>
            <div class="box">
              <li>创建时间</li>
              <p>
                <span @click="sortU('create_time', 1)">
                  <svg t="1721730356203" class="icon" viewBox="0 0 1085 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2639" id="mx_n_1721730356203" width="12" height="12"
                    fill="#909399">
                    <path d="M545.20232799 240.601164L1087.99999999 783.398836l-1085.595343 0z" p-id="2640"></path>
                  </svg>
                </span>
                <span @click="sortD('create_time', 2)">
                  <svg t="1721730368158" class="icon" viewBox="0 0 1085 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2818" width="12" height="12" fill="#909399">
                    <path d="M542.797672 783.398836L0 240.601164h1085.595343z" p-id="2819"></path>
                  </svg>
                </span>
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="ipAddress" align="center" label="注册ip" width="150px">
          <template #header>
            <div class="box">
              <li>注册IP</li>
              <p>
                <span @click="sortU('ip_address', 1)">
                  <svg t="1721730356203" class="icon" viewBox="0 0 1085 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2639" id="mx_n_1721730356203" width="12" height="12"
                    fill="#909399">
                    <path d="M545.20232799 240.601164L1087.99999999 783.398836l-1085.595343 0z" p-id="2640"></path>
                  </svg>
                </span>
                <span @click="sortD('ip_address', 2)">
                  <svg t="1721730368158" class="icon" viewBox="0 0 1085 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2818" width="12" height="12" fill="#909399">
                    <path d="M542.797672 783.398836L0 240.601164h1085.595343z" p-id="2819"></path>
                  </svg>
                </span>
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="logTime" align="center" label="登录时间" width="150px">
          <template #header>
            <div class="box">
              <li>登录时间</li>
              <p>
                <span @click="sortU('log_time', 1)">
                  <svg t="1721730356203" class="icon" viewBox="0 0 1085 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2639" id="mx_n_1721730356203" width="12" height="12"
                    fill="#909399">
                    <path d="M545.20232799 240.601164L1087.99999999 783.398836l-1085.595343 0z" p-id="2640"></path>
                  </svg>
                </span>
                <span @click="sortD('log_time', 2)">
                  <svg t="1721730368158" class="icon" viewBox="0 0 1085 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2818" width="12" height="12" fill="#909399">
                    <path d="M542.797672 783.398836L0 240.601164h1085.595343z" p-id="2819"></path>
                  </svg>
                </span>
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="loginIp" align="center" label="登陆ip" width="150px">
          <template #header>
            <div class="box">
              <li>登录ip</li>
              <p>
                <span @click="sortU('login_ip', 1)">
                  <svg t="1721730356203" class="icon" viewBox="0 0 1085 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2639" id="mx_n_1721730356203" width="12" height="12"
                    fill="#909399">
                    <path d="M545.20232799 240.601164L1087.99999999 783.398836l-1085.595343 0z" p-id="2640"></path>
                  </svg>
                </span>
                <span @click="sortD('login_ip', 2)">
                  <svg t="1721730368158" class="icon" viewBox="0 0 1085 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2818" width="12" height="12" fill="#909399">
                    <path d="M542.797672 783.398836L0 240.601164h1085.595343z" p-id="2819"></path>
                  </svg>
                </span>
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="性别">
          <template v-slot="{ row }">
            <span>{{ row.title === 0 ? "先生" : row.title === 1 ? "夫人" : row.title === 2 ? "女士" : row.title === 3 ? "中性" :
              ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="400px">
          <template v-slot="{ row }">
            <!--            <el-button type="text" @click="editBtn">编辑</el-button>-->
            <el-button type="text" @click="ModifyLabels(row.id)">编辑</el-button>
            <el-button type="text" @click="Front(row.id)">查看人像照片</el-button>
            <el-button type="text" @click="ViewTheBack(row.id)">查看国徽照片</el-button>
            <el-button type="text" @click="delBtn(row.id)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <paging :page-size="queryParms.pageSize" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />

    </el-card>
    <editReg :dialog-visible.sync="dialogVisible" />
    <el-dialog :title="photoTitle" :visible.sync="dialogVisiblePhoto" width="30%">
      <el-image :src="'data:image/png;base64,' + PhotoUrl" fit="cover"></el-image>
    </el-dialog>
    <el-dialog title="修改标签" :visible.sync="dialogFormVisibleLabel" width="30%">
      <el-form :model="label" :inline="true">
        <el-form-item label="用户标签">
          <!--          <el-select v-model="label.tagName" placeholder="请输入要修改的标签">-->
          <!--            <el-option label="日内" value="1"></el-option>-->
          <!--            <el-option label="非日内" value="2"></el-option>-->
          <!--          </el-select>-->
          <el-input v-model="label.tagName" placeholder="请输入要修改的标签" size="mini"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleLabel = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="submitLabel" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import editReg from './components/editReg'
import paging from '@/components/paging.vue'
import { deleteUser, getIdCardBack, getIdCardFront, getUserLabels, getUserPage, ModifyLabels } from "@/api/staff";

export default {
  name: 'VueAdminIndex',
  components: {
    paging,
    editReg
  },
  data() {
    return {
      label: {
        tagName: null, // 标签名称
        id: null, // 当前标签的id
      },
      dialogFormVisibleLabel: false, // 修改标签dialog
      photoTitle: null, // 照片弹出框标题
      dialogVisiblePhoto: false, // 照片弹出框
      PhotoUrl: null, // 照片地址
      queryParms: {
        page: 1, // 页码
        pageSize: 10, // 每页条数
        username: null, // 姓名
        emails: null, //邮箱
        ipAddress: null, // 注册ip
        loginIp: null,  // 登录ip
        userTagName: null, // 用户标签
        sortField: null,  // 排序的字段
        sortOrder: null   // 排序的方向
      },
      tableData: [
        {
          address: '1122'
        }
      ],
      dialogVisible: false,
      // 后期要改
      currentPage: 1,
      pageSize: 10,
      total: 100
    }
  },

  mounted() {
    this.getUserInfo()
  },

  methods: {
    // 查询
    chaBTn() {
      this.queryParms.page = 1
      this.getUserInfo()
    },
    // 编辑
    editBtn() {
      this.dialogVisible = true
    },
    // 删除
    delBtn(id) {
      this.$confirm('你确定要删除吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deleteUser(id)
        if (res.photoBytes === '删除成功!') {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          await this.getUserInfo()
        } else {
          this.$message({
            type: 'error',
            message: '该用户有交易账户,暂时无法删除'
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 后期要改
    handleSizeChange(val) {
      this.pageSize = val
      this.queryParms.pageSize = val
      this.getUserInfo()
      // 处理分页大小改变的逻辑
      console.log(`每页 ${val} 条`, this.pageSize)
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.queryParms.page = val
      this.getUserInfo()
      // 处理当前页码改变的逻辑
      console.log(`第 ${val} 页`)
    },

    async getUserInfo() {
      const data = await getUserPage(this.queryParms)
      this.tableData = data.records
      this.total = data.total
    },

    async Front(id) {
      const res = await getIdCardFront(id)
      // let decodedData = window.atob()
      this.PhotoUrl = res.photoBytes
      this.dialogVisiblePhoto = true
      this.photoTitle = '查看身份证人像照片'
    },

    async ViewTheBack(id) {
      const res = await getIdCardBack(id)
      this.PhotoUrl = res.photoBytes
      this.dialogVisiblePhoto = true
      this.photoTitle = '查看身份证国徽照片'
    },

    async ModifyLabels(id) {
      this.label.id = id
      const res = await getUserLabels(id)
      this.label.tagName = res.paymentResult
      this.dialogFormVisibleLabel = true
    },

    async submitLabel() {
      const res = await ModifyLabels(this.label)
      this.$message({
        type: 'success',
        message: res.paymentResult
      })
      this.dialogFormVisibleLabel = false
      await this.getUserInfo()
    },
    // 升序  
    sortU(item, type) {
      this.queryParms.sortField = item
      this.queryParms.sortOrder = type
      this.getUserInfo()
    },
    // 降序
    sortD(item, type) {
      this.queryParms.sortField = item
      this.queryParms.sortOrder = type
      this.getUserInfo()
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  align-items: center;
  justify-content: center;

  li {
    list-style: none;
  }

  p {
    display: flex;
    flex-direction: column;
    margin-left: 5px;
    padding: 0;
    height: 23px;

    span {
      height: 8px;
      display: flex;
    }
  }
}

@media (max-width:768px) {
  .el-form-item {
    display: flex;

    ::v-deep.el-input__inner {
      width: 190px;
    }

  }
}
</style>
